<template>
  <div class="h100 orderManagePage">
    <full-parent-dom-with-dask :tip="operationTip" :loading="spinningLoading"></full-parent-dom-with-dask>
    <div class="orderManageSearch table-page-search-wrapper">
      <order-manage-search @clickbtn="handleClickSearchBtn"></order-manage-search>
    </div>
    <div class="orderManageMain">
      <order-manage-table-list ref="orderManageMainComp" @clickbtn="handleMainCompClick"></order-manage-table-list>
    </div>
  </div>
</template>
<script>
import OrderManageSearch from './components/OrderManageSearch.vue'
import OrderManageTableList from './components/OrderManageTableList.vue'
import OrderManageSearchForm from './components/OrderManageSearchForm.vue'
import BgOrderSelecServices from './components/BgOrderSelecServices.vue'
import BgOrderSelectVehiclesMain from './components/BgOrderSelectVehiclesMain.vue'
import OrderManageDetail from './components/OrderManageDetail.vue'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import CarModelDetail from '@/views/vehicle/components/CarModelDetail'
import { minxinDrawerUse } from '@/utils/mixin'
import orderManagementApi from '@/api/modules/system/orderManagement'
import { managePerms } from '@/config/permission/index'
import { mapState } from 'vuex'
export default {
  mixins: [minxinDrawerUse],
  components: {
    OrderManageSearch,
    OrderManageTableList,
    OrderManageSearchForm,
    FullParentDomWithDask,
    BgOrderSelecServices,
    BgOrderSelectVehiclesMain,
    OrderManageDetail,
    CarModelDetail
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.orderManagement.queryParams,
      rightDrawerEvent: (state) => state.orderManagement.rightDrawerEvent
    })
  },
  data () {
    return {
      // 用来控制子组件需要强制刷新数据的属性
      nowTime: 1000,
      spinningLoading: false,
      operationTip: ''
    }
  },
  watch: {
    'rightDrawerEvent': {
      handler () {
        this.handlerRightDrawerEvent()
      },
      immediate: true
    }
  },
  created () {
    this.getPageDictData()
  },
  methods: {
    handlerRightDrawerEvent () {
      const method = this[this.rightDrawerEvent.key]
      if (method) {
        method(this.rightDrawerEvent.data)
      }
    },
    handleClickSearchBtn (data) {
      this.nowTime = new Date().getTime()
      if (this[data.type]) {
        this[data.type](data.data)
      }
    },
    handleMainCompClick (data) {
      this.nowTime = new Date().getTime()
      if (this[data.type]) {
        this[data.type](data.data)
      }
    },
    openSearchComp () {
      const _this = this
      const buttons = [{
        key: '',
        title: 'inquiry',
        type: 'primary',
        name: 'searchBtn',
        method () {
          _this.searchData()
        },
        loading: false,
        disabled: false
      }, {
        key: '',
        title: 'cancel',
        type: 'info',
        name: 'cancelBtn',
        method: null,
        callback: null,
        loading: false,
        disabled: false
      }]
      const vars = { nowTime: Date.now(), class: 'rightDrawerWithoutCol', searchFun: _this.searchData }
      this.showRightDrawer(OrderManageSearchForm, this.$t('searchOrder'), buttons, '460px', vars)
    },
    // 后台下单:选择车辆, isBack是否是点上一步
    openBgOrderStep1 (isBack = false) {
      const vars = { time: Date.now(), class: 'rightDrawerWithoutCol', isBack }
      const buttons = [{
        key: managePerms.order.add,
        title: 'next',
        type: 'primary',
        name: 'nextBtn',
        method: (comp) => {
          this.bgOrderNextStep(comp)
        },
        callback: null,
        loading: false,
        disabled: false
      }, {
        key: '',
        title: 'cancel',
        type: 'info',
        name: 'cancelBtn',
        method: null,
        callback: null,
        loading: false,
        disabled: false
      }]
      if (!isBack) {
        sessionStorage.removeItem('selectedService')
      }
      this.showRightDrawer(BgOrderSelectVehiclesMain, this.$t('bgOrderSelectVehicles'), buttons, 'large', vars)
    },
    // 后台下单:选择服务中下一步
    bgOrderNextStep (comp) {
      const formData = comp.getFormData()
      if (!formData.modelId) {
        this.$message.error(this.$t('pleaseSelect') + this.$t('vehicleModel').toLowerCase())
        return
      }
      if (formData.total === 0) {
        this.$message.error(this.$t('pleaseSelectVehicle'))
        return
      }
      this.$store.commit('setOrderManagementRightDrawerEvent', { key: 'bgOrderSelectServices', data: formData })
    },
    // 后台下单:选择服务
    bgOrderSelectServices (data) {
      const vars = { time: Date.now(), class: 'rightDrawerWithoutCol', info: data }
      const buttons = [{
        key: managePerms.order.add,
        title: 'previous',
        type: 'primary',
        name: 'previousBtn',
        method: () => {
          this.openBgOrderStep1(true)
          this.$store.commit('resetOrderManagementRightDrawerEvent')
        },
        callback: null,
        loading: false,
        disabled: false
      }, {
        key: '',
        title: 'sure',
        type: 'primary',
        name: 'saveDataBtn',
        method: this.saveEditOrderFormData,
        callback: () => {
          this.searchData(true)
        },
        loading: false,
        disabled: false
      }, {
        key: '',
        title: 'cancel',
        type: 'info',
        name: 'cancelBtn',
        method: null,
        callback: null,
        loading: false,
        disabled: false
      }]
      this.showRightDrawer(BgOrderSelecServices, this.$t('bgOrderSelectService'), buttons, 'huge', vars)
    },
    saveEditOrderFormData (data) {
      return orderManagementApi.addBgServiceOrder(data)
    },
    searchData (isToFirstPage = true) {
      this.$refs.orderManageMainComp.refreshData(isToFirstPage)
    },
    // 查看订单详情
    showOrderDetail (record) {
      const vars = {
        nowTime: Date.now(),
        id: record.id,
        info: {
          goodsCode: record.goodsCode
        }
      }
      this.showRightDrawer(OrderManageDetail, this.$t('orderDetail'), [], 'large', vars)
    },
    // 查看车辆详情
    showVehicleDetail (record) {
      this.showRightDrawer(CarModelDetail, this.$t('vehicleDetail'), [], 'huge', { time: Date.now(), vin: record.vin })
    },
    getPageDictData () {
      ['getOrderRefundStatusDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    }
  },
  beforeDestroy () {
    this.$store.commit('resetOrderManagementQueryParams')
    this.$store.commit('resetOrderManagementRightDrawerEvent')
  }

}
</script>
<style lang="less">
@import url("./style/list.less");
</style>
